<template>
  <div class="condition_item clearfix">
    <div class="condition_item_content" v-if="conditionItem.title !== '已选'">
      <span class="title">{{conditionItem.title}}:</span>
      <span v-for="(condition, index) in conditionItem.conditions"
            class="item"
            @click="conditionClick(index)"
            :class="{active: currentIndex === index}">{{condition}}</span>
    </div>
    <el-autocomplete
      class="inline-input"
      v-model="input"
      :fetch-suggestions="querySearch"
      :placeholder="'其他' + conditionItem.title"
      :trigger-on-focus="false"
      @select="handleSelect"
      v-if="conditionItem.isShowInput"
      @blur="blur"></el-autocomplete>
    <div v-if="conditionItem.title == '已选'" class="select">
      <span class="title">{{conditionItem.title}}:</span>
      <span class="city" v-if="conditionItem.conditions.city">{{conditionItem.conditions.city}}</span>
      <span class="time" v-if="conditionItem.conditions.time">{{timeFormat}}</span>
      <span class="position" v-if="conditionItem.conditions.position">{{conditionItem.conditions.position}}</span>
    </div>
  </div>
</template>

<script>
  import {city, reverseTimeFormat} from "common/Utils";

  export default {
    name: "ConditionItem",
    props: {
      conditionItem: {
        type: Object,
        default() {
          return {
            title: '标题',
            conditions: ["条件1", "条件2", "条件3", "条件4"],
            isShowInput: false
          }
        }
      },
    },
    data() {
      return {
        restaurants: [],
        currentIndex: 0,
        condition: '',
        input: '',
      }
    },
    watch: {
      input(newValue) {
        this.condition = newValue
        const condition = {
          title: this.conditionItem.title,
          conditionSelect: this.condition
        }
        this.$bus.$emit('conditionClick', condition)
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    },
    computed: {
      timeFormat() {
        return reverseTimeFormat(this.conditionItem.conditions.time)
      },
    },
    methods: {
      /*
      事件监听
       */
      conditionClick(index) {
        this.input = ''
        this.currentIndex = index
        this.condition = this.conditionItem.conditions[index]
        const condition = {
          title: this.conditionItem.title,
          conditionSelect: !index? '' : this.condition
        }
        this.$bus.$emit('conditionClick', condition)
      },
      blur() {
        this.currentIndex = -1;
        this.condition = this.input
        const condition = {
          title: this.conditionItem.title,
          conditionSelect: this.condition
        }
        this.$bus.$emit('conditionClick', condition)
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return city()
      },
      handleSelect(item) {
        // console.log(item);
      }
    },
  }
</script>

<style scoped>
  .condition_item {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  .condition_item_content {
    float: left;
    width: 820px;
  }

  .condition_item_content .title {
    margin-right: 30px;
    font-weight: 700;
  }

  .condition_item_content .item {
    margin-right: 30px;
    cursor: pointer;
    color: #8F9395;
  }

  .condition_item_content .active {
    color: #375ab6;
  }

  .inline-input {
    float: left;
    margin-bottom: 0;
  }

  .select {

  }

  .select .title {
    margin-right: 30px;
    font-weight: 700;
  }

  .select .city,
  .select .time,
  .select .position {
    margin-right: 30px;
    color: #002766;
    font-weight: 700;
  }

</style>
